<!-- eslint-disable vue/multi-word-component-names -->


<template>
  <div>
  <span> <img @click="goBack" class="fan"  src="../../assets/icon/hdpi/fh.png" alt=""></span>
  <span class="fan1">消息</span>
  <span class="fan2">全部已读</span>
</div>
<div class="kai">
    <div  class="kai1">
    <span class="kai2">打开系统消息,H币入账等消息不错过</span>
</div>
</div>
<router-link to="system" class="xitong">
    <dl>
        <dt><img src="../../assets/icon/hdpi/x1.png" alt=""></dt>
        <dd class="xiao">系统消息</dd>
    </dl>
</router-link>
<router-link to="Consultation" class="xitong1">
    <dl>
        <dt><img src="../../assets/icon/hdpi/x2.png" alt=""></dt>
        <dd class="wen">问诊消息</dd>
    </dl>
</router-link>
<router-link to="report" class="xitong2">
   <dl>
    <dt><img src="../../assets/icon/hdpi/x3.png" alt=""></dt>
    <dd class="xitong3">H币入账消息</dd>
   </dl>
</router-link>
</template>
<script setup lang="ts">

import { useRouter } from 'vue-router'; 

    const router = useRouter(); 
function goBack() {  
      // 使用router.go(-1)模拟浏览器的后退操作  
      router.push('/questions');  
    }  
</script>
<style>
.fan{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 35px;
}
.fan1{
    margin-left: 130px;
    font-size: 17px;
   color: #000;
}
.fan2{
    margin-left: 90px;
    font-size: 12px;
    color: #000;
}
.xitong{
    width: 100%;
    height: 50px;
    margin-top: 20px;
    position: absolute;
    left: 20px;
    border-bottom: 1px solid #ccc;
    float: left;
}
.xitong dd{
   position: absolute;
   top: 10px;
   left: 60px;
   color: #4cc399;
}
.xitong1{
    margin-top: 80px;
    position: absolute;
    left: 20px;
    width: 100%;
    height: 57px;
    border-bottom: 1px solid #ccc;
}
.wen{
    position: absolute;
      top: 10px;
   left: 60px;
   color: #f984a2;
}
.xitong2{
    margin-top: 145px;
    position: absolute;
    left: 20px;
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #ccc;
}
.xitong3{
     position: absolute;
      top: 10px;
   left: 60px;
   color:#ffab26;
}
.kai{
    width: 100%;
    height: 40px;
    background: #f1f1f1;
}
.kai1{
    width: 100%;
    height: 30px;
    background: #fff;
   position: absolute;
   top: 64px;

}
.kai2{
position: absolute;
top: 5px;
left: 10px;
}
</style>